<template>
  <div class="annual-page auunalDetails">
    <div class="container-content">
      <div class="title">
        <span>专家评审管理/详情</span>
        <span class="back-btn" @click="backBtn"
          ><img src="../../assets/images/icon_comm_back.png" alt="" />返回</span
        >
      </div>
      <!-- 标题 基本信息-->
      <div>
        <div class="right-title">
          <img src="../../assets/images/icon_16_title.png" alt="" /> 任务信息
        </div>
        <el-descriptions border :column="1">
          <el-descriptions-item
            label="任务名称"
            label-class-name="descriptions-item-label-box"
            content-class-name="descriptions-item-content"
          >
            <span>
              {{ reviewTask.taskName }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item
            label="创建时间"
            label-class-name="descriptions-item-label-box"
            content-class-name="descriptions-item-content"
          >
            <span>
              {{ reviewTask.createTime }}
            </span>
          </el-descriptions-item>
          <!-- <el-descriptions-item
            label="评审会议时间"
            label-class-name="descriptions-item-label-box"
            content-class-name="descriptions-item-content"
          >
            <span>
              {{
                reviewTask.reviewTimeStart + " - " + reviewTask.reviewTimeEnd
              }}
            </span>
          </el-descriptions-item> -->
          <el-descriptions-item
            label="评审会议地点"
            label-class-name="descriptions-item-label-box"
            content-class-name="descriptions-item-content"
          >
            <span>
              {{ reviewTask.reviewAddress }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 标题 项目信息-->
      <div>
        <div class="right-title">
          <img src="../../assets/images/icon_16_title.png" alt="" /> 项目信息
        </div>
        <el-table :data="projectInfo" border :cell-style="columnStyle">
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="320px"
          />
          <el-table-column
            label="项目名称"
            align="center"
            prop="name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="项目类型"
            align="center"
            prop="type"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{
                scope.row.type == 0
                  ? "建设类"
                  : scope.row.type == 1
                  ? "购买服务"
                  : scope.row.type == 2
                  ? "运维类"
                  : "其它"
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="申报单位"
            align="center"
            prop="company"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="项目投资估算(万元)"
            align="center"
            prop="investmentEstimation"
          />
        </el-table>
      </div>
      <!-- 标题 审批进度-->
      <div>
        <div class="right-title">
          <img src="../../assets/images/icon_16_title.png" alt="" /> 审批进度
        </div>
        <el-table :data="approvalsList" border :cell-style="columnStyle">
          <el-table-column
            label="节点"
            align="center"
            prop="approvalNode"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="开始时间"
            align="center"
            prop="startTime"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="结束时间"
            align="center"
            prop="endTime"
            :show-overflow-tooltip="true"
          />

          <el-table-column label="状态" align="center" prop="approvalStatus">
            <template slot-scope="scope">
              {{
                scope.row.approvalStatus == 9
                  ? "待接受"
                  : scope.row.approvalStatus == 10
                  ? "已接受"
                  : scope.row.approvalStatus == 11
                  ? "待审批"
                  : scope.row.approvalStatus == 16
                  ? "待开始"
                  : scope.row.approvalStatus == 17 ||
                    scope.row.approvalStatus == 18 ||
                    scope.row.approvalStatus == 19
                  ? "已结束"
                  : scope.row.approvalStatus == 61
                  ? "待审核"
                  : scope.row.approvalStatus == 62
                  ? "审核完成"
                  : scope.row.approvalStatus == 63
                  ? "不同意取消"
                  : scope.row.approvalStatus == 64
                  ? "申请取消"
                  : "-"
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="申报详情操作"
            align="center"
            prop="approvalOperation"
          >
            <template slot-scope="scope">
              <!-- 16 现场论证 13 意见汇总 -->
              <el-button
                size="mini"
                type="text"
                @click="handDialog(scope.row, 1)"
                v-if="scope.row.approvalStatus == 11"
              >
                审批
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handDialog(scope.row, 2)"
                v-if="scope.row.approvalStatus == 16"
              >
                查看评审会议详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="审批结果"
            align="center"
            prop="approvalResult"
          />
                    <el-table-column
            label="资料库"
            align="center"
            prop="relationFile"
          >
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" v-for="item in scope.row.relationFile" :key="item.id" :content="item.fileName" placement="left">
                <!-- <a :href="item.fileUrl" style="color:#3171ee" class="files-box">
                  {{item.fileName}}
                </a> -->
                <span style="color:#3171ee" class="files-box" @click="$download(item.fileUrl)">{{item.fileName}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <MeetingDialog
      :meetingShow="meetingShow"
      :reviewTaskId="reviewTaskId"
      @changeShowDialog="changeShowDialog"
    />
    <DeclareDialog
      :declareShow="declareShow"
      :reviewTaskId="reviewTaskId"
      @changeShowDialog="changeShowDialog"
    />
  </div>
</template>

<script>
import { getExpertDetails } from "@/api/manage/manage";
import DeclareDialog from "./components/declareDialog";
import MeetingDialog from "./components/meetingDialog";
export default {
  components: {
    DeclareDialog,
    MeetingDialog,
  },
  data() {
    return {
      reviewTask: {}, //任务信息
      approvalsList: [], //审批进度
      projectInfo: [], //项目信息
      meetingShow: false, //查看会议
      declareShow: false, //预审
      reviewTaskId: "", //id
      defaultLabel: [
        { approvalNode: "接受任务" },
         {approvalNode: "申请取消" ,isShow:false},
        { approvalNode: "现场论证" },
      ],
    };
  },
  created() {
    this.getDetails();
  },
  methods: {
    // 表格列样式更改
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        //第1列的背景色就改变
        return "background:#f8f8f9";
      }
    },
    // 获取详情
    getDetails() {
      let id = this.$route.query.reviewTaskId;
      let erpid = this.$route.query.expertId;
      getExpertDetails(id, erpid).then((res) => {
        if (res.code == 200) {
          this.reviewTask = res.data.reviewTask;
          this.projectInfo = res.data.projectManagementList;

          let data = [];
          if (res.data.approvalList) {
            console.log(1);
            this.defaultLabel.map((item, index) => {
              let flag = false;
              res.data.approvalList.map((item1) => {
                // if(item.approvalStage==item1.approvalStage){
                if (item.approvalNode == item1.approvalNode) {
                  data.push({ ...item, ...item1 });
                  data.sort(function (a, b) {
                    return (
                      new Date(a.startTime).getTime() -
                      new Date(b.startTime).getTime()
                    );
                  });
                  flag = true;
                  return false;
                  // }
                } else {
                  return false;
                }
              });
              if (flag == false) {
                if(item.isShow==false){
                  return 
                }else{
                  data.push(item);
                }
              }
              this.approvalsList = data;
              return false;
            });
          } else {
            console.log(0);
            this.approvalsList = res.data.approvalList;
          }
        }
      });
    },
    //弹窗
    handDialog(row, type) {
      this.reviewTaskId = this.reviewTask.reviewTaskId;
      if (type == 1) {
        this.declareShow = true;
      } else {
        this.meetingShow = true;
      }
    },
    changeShowDialog(data) {
      if (data == "false") {
        this.declareShow = false;
        this.meetingShow = false;
        setTimeout(() => {
          this.getDetails();
        }, 1000);
      }
    },
    //返回按钮
    backBtn() {
      this.$router.push({path:'/expert_pro/manage/confirm'})
    },
  },
  
};
</script>

<style lang="scss" scoped>
.annual-page {
  width: 100%;
  background: #f5f5f5;
  padding: 16px;
  font-size: 14px;
  .container-content {
    padding: 24px;
    background: #fff;
    .title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      .back-btn {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          margin-right: 7px;
        }
      }
    }
  }
  .right-title {
    // width: 1600px;
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    border: 1px solid #ebecef;
    border-right: 0;
    border-left: 0;
    margin: 24px 0;
    img {
      margin-right: 6px;
    }
  }
}
.files-box{
  width: 100%;
  line-height: 36px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  float: left;
  cursor: pointer;
}
</style>
<style lang="scss">
.annual-page {
  /* 信息描述组件样式更改 */
  .descriptions-item-label-box {
    text-align: center;
    width: 240px !important;
  }
  .descriptions-item-content {
    text-align: left !important;
    width: 1360px !important;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
      position: relative;
      top: 4px;
    }
  }
  .cancel-border-top {
    border-top: 0 !important;
  }
  .cancel-border-bottom {
    border-bottom: 0 !important;
  }
  .descriptions-item-height {
    height: 108px;
  }
}
</style>
